情境

步驟對話框/步驟條元件，是透過一系列的編號步驟來顯示當前操作的進度。由於某些操作過於複雜繁瑣，或者有順序性，以至於不太適合一次把全部的資訊展示在一個頁面當中。

因此，步驟對話框可以幫助使用者在操作的時候，能夠按部就班，然後隨著每一個步驟的引導來完成系統指示的操作：

你能看見多遠的未來呢？

關於隨著內容變動的高度

我們可以看到上圖的步驟對話框，當中有三個步驟，分別是：

1. Contact Details
2. Our Services
3. Anything on your mind?

透過這些標題，我們很清楚的知道這三個步驟的內容必定是很不同的。因此，內容長度也很可能有不小的差異，如下範例：

不知道各位看到上圖會有什麼感想呢？

其實我們可以很明顯的觀察到，當第一步驟跳到第二步驟的時候，整個對話框的高度明顯的改變了。所以，Previous 和 Next 的按鈕位置也很明顯的改變。

這樣的改變，雖然也沒有破版，也沒有造成什麼損壞，但事實上，這樣造成的影響還蠻大的。

首先，以使用者體驗來說，我們沒辦法保持滑鼠在不改變位置的狀況下，點擊到同一個按鈕。為了走回上一步，或是走到下一步，我們勢必會需要移動滑鼠才能夠點擊到改變位置之後的按鈕，這樣在操作的流暢度上給我們帶來很突兀的不便。

第二點，比較好的狀況，當Previous 和 Next 的按鈕改變位置，我們大不了就是點到一個「無效」的位置。但是比較糟糕的狀況是，他有沒有可能讓我們誤觸了一個「有效」但我們卻很不想要去按到的位置呢？

如上圖，我們很可能很直覺的連續點擊，然後不小心誤觸了一個「刪除按鈕」或是「色情廣告版位」，我想，這對使用者來說，某種程度上是一種陷阱或災難。

因此，如果我們在這個對話框上，給定一個固定的高度，並且將按鈕固定在不同步驟的同一個位置，花一點點的小巧思，就能夠避免問題發生：

.dialog {
  height: 600px;
}

按照不同條件出現或隱藏的按鈕

還有一個狀況我們有可能會不小心讓按鈕的位置改變，就是當我們在第一步驟的時候，因為前面就沒有其他步驟了，因此我們想要隱藏 Previous 按鈕：

.actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

<div class="actions">
  <button>Previous</button>
  <button>Next</button>
</div>

有可能造成按鈕移位的狀況，其中一個是使用 JavaScript，下面是示意的程式碼：

<div class="actions">
  {!isFirst && <button>Previous</button>}
  <button>Next</button>
</div>

或者，如果是 CSS 的做法，有可能是這樣：

<div class="actions">
  <button style={{ display: isFirst ? 'none' : 'block' }}>Previous</button>
  <button>Next</button>
</div>

不論是使用 JavaScript 直接將按鈕的 DOM 節點移除，或是使用 display: none; 來隱藏按鈕，他們的共同點都是「不會在網頁上佔據空間」。因此會造成其他元件因為遞補位置而位移。

但如果我們使用 opacity: 0; 或是 visibility: hidden; 來隱藏元件，雖然在畫面上看不到，但是因為沒有真正從 DOM 上面移除，因此使用者如果打開網頁開發者工具，也能夠自己修改 CSS 來將解除隱藏狀態的按鈕，因此也不是一個很漂亮的解決方案。

我們理想的方法，是希望在隱藏按鈕的同時，一方面不讓其他元件因為遞補而造成位移，另一方面也能夠乾淨的從 DOM 裡面將節點移除。

因此，我們原本是使用 Flex box 來使按鈕能夠對齊和並排，我們可以改用 Grid box 來處理，透過 grid-column 來指定元件要擺放的網格位置：

.actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.previous {
  justify-self: flex-end;
}

.next {
  grid-column: 2;
}

<div class="actions">
  {!isFirst && <button class="previous">Previous</button>}
  <button class="next">Next</button>
</div>

如下圖，我們能夠在移除 Previous 按鈕之餘，仍讓 Next 按鈕能夠保持原本的位置：

小結

除了今天的步驟對話框範例以外，其實我們也有許多可能因為畫面內容上的改變，而造成按鈕或其他元件的位移，例如 Pagination 也有可能會造成類似的情況，因為 Pagination 的操作，也很容易造成畫面上資料量的變多或變少。

今天討論的題目，即使沒有做好，可能也不會產生什麼 bug，但是因為這些畫面上的動態改變，卻很容易會造成使用者誤按的狀況，而這些部分，也是我們需要考慮和試圖去避免的。